<template>
  <div class="map-components">
    <div id="container" class="container-box"></div>
    <div class="map-content">
      <van-popup class="map-popup" v-model="popupShow" position="bottom" overlay-class="map-content">
        <div class="popup-item" v-for="(item) in popupData" :key="item.type" @click="popupItemClick(item)">{{ item.name }}
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { AMapBase, mapGeolocation, mapGetAddress, setMarker } from '@/util/AMapBase'
export default {
  name: 'AMapComponents',
  data() {
    return {
      map: null, // 保存地图初始化对象信息
      infoWindow: null, // 保存信息弹出对象信息
      markerList: [], // 点击后标记保存的信息 {regeocode: 当前点地图信息, marker: 标记构建实例}
      markerData: null, // 当前弹框显示的标记数据
      popupShow: false, // 导航列表展示
      popupData: [{ name: '腾讯地图', type: 'TX' }, { name: '百度地图', type: 'BD' }, { name: '高德地图', type: 'GD' }, { name: '苹果地图', type: 'PG' }]
    }
  },
  props: {
    // 默认展示地图到时候中心点,不传默认展示自身定位(显示优先权大于location,地图中心最终还是会定位到center) 格式[133.165,26.365]
    center: {
      type: Array,
      default: null
    },
    // 是否获取自身定位(展示自身定位圆点标记)
    location: {
      type: Boolean,
      default: true
    },
    // 是否加载默认自身标记(需要location为true)
    defaultModify: {
      type: Boolean,
      default: true
    },
    // 是否运行修改标记(点击添加标记操作)
    isModify: {
      type: Boolean,
      default: true
    },
    // 最大标记数(超过最大标记数则会先进先出覆盖标记),默认为1,true为无限,需配合isModify使用
    maxMarker: {
      type: [Number, Boolean],
      default: 1
    },
    // 默认展示标记的点 格式[title:'',lnglat:[133.126,26.365]]
    defalutModifyList: {
      type: Array,
      default: () => []
    },
    // 是否需要默认弹框
    isInfoWindow: {
      type: Boolean,
      default: true
    },
    // 标记点击是否默认展示出弹框
    showInfoWindw: {
      type: Boolean,
      default: true
    },
    // 弹框定位,可选值top,right,bottom,left
    infoWindowOffset: {
      type: String,
      default: 'top'
    },
    // 自定义的弹框内容,支持string或者vue异步组件
    infoWindowContent: {
      type: [String, Object],
      default: null
    }
  },
  watch: {
    isModify(nv) {
      nv ? this.clickOn() : this.clickOff()
    },
    defalutModifyList() {
      this.map.remove(this.modifyArr)
      this.addDefautlModify()
    },
    center() {
      this.center && this.map.setCenter(this.center)
    }
  },
  mounted() {
    !this.center && !this.location && console.warn('建议任选center或location来确认定位,否则只会定位到所在城市中心')
    this.$nextTick(() => this.mapInit())
  },
  methods: {
    // 初始化地图设置(部分设置修改后地图未更新可尝试使用)
    mapInit() {
      AMapBase.then(res => {
        // eslint-disable-next-line no-undef
        this.map = new AMap.Map('container', { resizeEnable: true, zoom: 20 })

        //在地图上显示工具条方法
        this.map.addControl(new AMap.ToolBar({ //toolBar
          //这里可以添加自己想要的参数  ，上面有官方文档的链接
          position: 'LT', // 默认位置：LT:左上角;
          autoPosition: true, //是否自动定位  默认为false
          locate: false, //是否显示定位按钮，默认为 true
        })); // 工具条

        // 根据需求获取定位逻辑
        if (this.location) {
          mapGeolocation(this.map).then(res => {
            // METHODS:获取定位成功回调事件
            this.$emit('geolocationComplete', res)
          }).catch(rej => {
            console.log(7777, rej)
            // METHODS:获取定位失败回调事件
            this.$emit('eolocationError', rej)
          }).finally(() => {
            this.center && this.map.setCenter(this.center)
          })
        } else {
          this.center && this.map.setCenter(this.center)
        }
        // 根据需求开启点击标记事件
        this.isModify && this.clickOn()
        // 添加默认不可操作标记
        this.defalutModifyList.length && this.addDefautlModify()
      })
    },

    // 添加不可操作默认标记
    addDefautlModify() {
      this.modifyArr = this.defalutModifyList.map(item => setMarker(item, this.isInfoWindow && this.markerClick))
      this.map.add(this.modifyArr)
    },
    // 开启点击事件
    clickOn() {
      this.map.on('click', this.mapClick)
    },
    // 关闭点击事件
    clickOff() {
      this.map.off('click', this.mapClick)
    },
    // 地图点击事件
    mapClick(data) {
      if (this.modifyArr) {
        this.map.remove(this.modifyArr)
      }
      console.log('地图点击事件', data)
      // 地理逆编译保存标记信息
      mapGetAddress([data.lnglat.lng, data.lnglat.lat]).then(res => {
        console.log('地图点击事件222', res)
        const opts = {
          lnglat: [data.lnglat.lng, data.lnglat.lat],
          title: res.regeocode.formattedAddress,
          regeocode: res.regeocode,
          key: this.markerList.length ? this.markerList[this.markerList.length - 1].key + 1 : 1
        }
        const m = setMarker(opts, this.isInfoWindow, this.dragstart, this.dragend)
        // 地图选点追加经纬度
        res.regeocode.position = data.lnglat
        const obj = {
          regeocode: res.regeocode,
          marker: m,
          key: opts.key
        }
        this.markerList.push(obj)
        this.map.add(m)
        if (this.markerList.length > this.maxMarker) {
          this.map.remove(this.markerList[0].marker)
          this.markerList.shift()
        }
        this.$emit('mapClickOK', data, this.markerList[this.markerList.length - 1], this.markerList)
      }).catch(rej => {
        this.$emit('mapClickErr', data)
        throw (rej)
      })
    },
  }
}
</script>

<style lang="scss">
.map-components {
  margin-top: 46px;
  width: 100%;
  height: calc(100% - 46px);

  .container-box {
    width: 100%;
    height: 100%;
  }
}

.map-content {
  .map-popup {
    .popup-item {
      //font-weight: bold;
      text-align: center;
      padding: 25px 0;
      background: #ffffff;
      border-bottom: 1px solid #e0e0e0;

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
